<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>投入品库存预警</title>
    <link rel="stylesheet" href="../../../../public/dist/css/layui.css">
    <link rel="stylesheet" href="../../../../public/font/iconfont.css">
    <link rel="stylesheet" href="../../../../css/twocss/commit.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="select common">
            <div class="select-title">查询条件</div>

            <div class="select-con">


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:95px;">投入产品名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:95px;">类别:</label>
                        <div class="layui-input-inline">
                            <select name="city" lay-verify="">
                  <option value="">请选择</option>
                  <option value="010">北京</option>
                  <option value="021">上海</option>
                  <option value="0571">杭州</option>
                </select>
                        </div>
                    </div>
                </div>

                <div class="select-btn">
                    <div class="layui-bg-green comquery ">查询</div>
                    <div class="layui-bg-green comquery ">重置</div>
                </div>
            </div>
        </div>

    </form>

    <div class="common-padding">
        <table class="layui-hide" id="test" lay-filter="testdome"></table>
    </div>
</body>

<!-- 头部 -->
<script type="text/html" id="toolbarinter">
    <div class="layui-btn-container ">
        <button class="layui-btn  layui-btn-sm colors" lay-event="add"><i class="layui-icon"></i></i>添加</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="update"><i class="layui-icon"></i>编辑</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="delete"><i class="layui-icon"></i>删除</button>
    </div>
</script>

<!-- 里面的查看 -->
<script type="text/html" id="More">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>

<script src="../../../../js/common/jquery.min.js"></script>
<script src="../../../../js/common/api.js"></script>
<script src="../../../../public/dist/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', "laydate"], function() {
        var $ = layui.jquery,
            table = layui.table,
            laydate = layui.laydate;

        laydate.render({
            elem: '#date1' //指定元素 
        });
        laydate.render({
            elem: '#date2' //指定元素
        });

        //监听头部监听
        table.on('toolbar(testdome)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听表格里面按钮
        table.on('tool(testdome)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'detail') { //查看
                //do somehing
                layer.msg('查看');
            }
        });

        //获取列表
        table.render({
            elem: '#test',
            url: "../../../../js/two/data.json",
            method: "GET",
            where: {},
            headers: {
                Authorization: "Bearer" + " " + sessions
            },
            toolbar: '#toolbarinter',
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            },
            request: {
                limitName: '10'
            },
            limits: [10, 20],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 0, //成功的状态码，默认：0
                msgName: null, //状态信息的字段名称，默认：msg
                countName: 'totalNum', //数据总数的字段名称，默认：count
                dataName: 'data', //数据列表的字段名称，默认：data
            },
            cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['prev', 'page', 'next', 'skip', 'count'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,
                groups: 5 //只显示 1 个连续页码
                    ,
                first: true //不显示首页
                    ,
                last: true //不显示尾页
                    ,
                prev: '下一页',
                next: "上一页",
                theme: "#c81623",
            },
            // height: 'full-20',//满高
            cols: [
                [{
                    title: '编号',
                    type: 'numbers',
                    fixed: 'left'
                }, {
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    width: 80,
                    sort: true,
                    fixed: 'left',
                    totalRowText: '合计：'
                }, {
                    field: 'username',
                    title: '用户名',
                    width: 80
                }, {
                    field: 'experience',
                    title: '积分',
                    width: 90,
                    sort: true,
                    totalRow: true
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 80,
                    sort: true
                }, {
                    field: 'score',
                    title: '评分',
                    width: 80,
                    sort: true,
                    totalRow: true
                }, {
                    field: 'city',
                    title: '城市',
                    width: 150
                }, {
                    field: 'sign',
                    title: '签名',
                    width: 200
                }, {
                    field: 'classify',
                    title: '职业',
                    width: 100
                }, {
                    field: 'wealth',
                    title: '财富',
                    width: 135,
                    sort: true,
                    totalRow: true
                }, {
                    field: 'wealth',
                    width: 137,
                    title: '更多',
                    minWidth: 20,
                    align: "center",
                    fixed: 'right',
                    toolbar: '#More',
                }]
            ]
        });
    })
</script>

</html>